<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../tf-imports/lodash.html">
<link rel="import" href="../tf-dashboard-common/scrollbar-style.html">
<link rel="import" href="../tf-multi-checkbox/tf-multi-checkbox.html">

<!--
tf-run-selector creates a set of checkboxes to display which runs are selected.
It also displays tooltips.

Properties in:
- runs: Array of strings representing the runs that may be selected
- tooltips: An object that maps from a run to the associated tooltip string.
When tooltips are available, runs that have no associated tooltip will be
hidden. When tooltips are available, the runs will be sorted by their tooltip.
- closestRun: The name of the run that is closest to the cursor (present when
tooltips are active). It will be highlighted
- classScale: An object (generated by tf-dashboard-common/tf-color-scale) that
maps from a run name to a class name, which will be used to color the run.
- xValue: The string that represents the x-value associated with the tooltips.
- xType: The string that describes what kind of data is displayed on the x axis.

Properties out:
- outSelected: The array of run names that are currently checked by the user.

-->
<dom-module id="tf-run-selector">
  <template>
    <div id="top-text">
      <template is="dom-if" if="[[xValue]]">
        <div class="x-tooltip tooltip-container">
          <div class="x-tooltip-label">[[xType]]</div>
          <div class="x-tooltip-value">[[xValue]]</div>
        </div>
      </template>
      <template is="dom-if" if="[[!xValue]]">
        <h3 id="tooltip-help" class="tooltip-container">
          Runs
        </h3>
      </template>
    </div>
    <tf-multi-checkbox
      names="[[runs]]"
      tooltips="[[tooltips]]"
      highlights="[[_arrayify(closestRun)]]"
      out-selected="{{outSelected}}"
      class-scale="[[classScale]]"
      hide-missing-tooltips
    ></tf-multi-checkbox>
    <paper-button
      class="x-button"
      id="toggle-all"
      on-tap="_toggleAll"
    >
    Toggle All Runs
    </paper-button>
    <style>
      :host {
        display: flex;
        flex-direction: column;
        padding-bottom: 10px;
        box-sizing: border-box;
      }
      #top-text {
        width: 100%;
        flex-grow: 0;
        flex-shrink: 0;
        padding-right: 16px;
        padding-bottom: 6px;
        box-sizing: border-box;
        color: var(--paper-grey-800);
      }
      tf-multi-checkbox {
        display: flex;
        flex-grow: 1;
        flex-shrink: 1;
      }
      .x-button {
        font-size: 13px;
        background-color: var(--tb-ui-light-accent);
        margin-top: 5px;
        color: var(--tb-ui-dark-accent);
      }
      .x-tooltip {
        display: flex;
        flex-direction: row;
      }
      .x-tooltip-label {
        flex-grow: 1;
        align-self: flex-start;
      }
      .x-tooltip-value {
        align-self: flex-end;
      }
      #tooltip-help {
        color: var(--paper-grey-800);
        margin: 0;
        font-weight: normal;
        font-size: 14px;
        margin-bottom: 5px;
      }
      paper-button {
        margin-left: 0;
      }
    </style>
  </template>
  <script>
  Polymer({
    is: "tf-run-selector",
    properties: {
      outSelected: {type: Array, notify: true},
      // runs: an array of strings, representing the run names that may be chosen
      runs: Array,
      tooltips: {type: Object, value: null}, // {[run: string]: string}
      xValue: {type: String, value: null}, // the string representing run's x val
      xType: String, // string: relative, stpe, wall_time
      classScale: Object, // map from run name to color class (css)
      closestRun: {type: String, value: null}, // which run has a value closest to mouse coordinate
    },
    _toggleAll: function() {
      if (this.outSelected.length > 0) {
        this.outSelected = [];
      } else {
        this.outSelected = this.runs.slice();
      }
    },
    _arrayify: function(item) {
      return [item];
    },
  });
  </script>
</dom-module>
